<template>
  <div class="productsmam">
    <a-card title="报错消息">
      <div class="search_box">
        <div>
          <a-input v-model="form.item_id" style="width:270px" placeholder="请输入淘宝产品ID" @keyup.enter="getErrorInfo"/>
          <a-select v-model="form.status" style="width: 180px" @change="selectchange">
            <a-select-option value="-1">
              全部
            </a-select-option>
            <a-select-option value="1">
              未读
            </a-select-option>
            <a-select-option value="2">
              已读
            </a-select-option>
          </a-select>
          <a-range-picker
            :ranges="{ 今天: [moment(), moment()], 本月: [moment(), moment().endOf('month')] }"
            show-time
            format="YYYY/MM/DD HH:mm:ss"
            @change="onChange"
          />
        </div>
        <div class="btns">
          <a-button icon="edit" style="background: #2db7f5;color: white;">
            标记已读
          </a-button>
          <a-button icon="edit" style="background: orange;color: white;">
            全部已读
          </a-button>
          <a-button icon="delete" style="background: orange;color: white;">
            删除
          </a-button>
          <a-button icon="delete" type="danger"> 全部删除</a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :row-key="record => record.id"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange">
        <template slot="status" slot-scope="record">
          <span
            v-if="record.status == 1"
            style="background-color:#1c84c6;color:white;padding:2px 5px;">未读</span>
          <span v-else style="background-color:orange;color:white;padding:2px 5px;">已读</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getErrorInfo } from '@/api/goods'
  import moment from 'moment'
  export default {
    name: 'Productsmam',
    data () {
      return {
        form: {
          item_id: '',
          status: '',
          start_time: '',
          end_time: ''
        },
        columns: [{
            title: '用户ID',
            dataIndex: 'user_id',
            // sorter: true,
            // width: '20%',
            scopedSlots: {
              customRender: 'user_id'
            }
          },
          {
            title: '淘宝产品ID',
            dataIndex: 'item_id',
            // width: '20%',
            scopedSlots: {
              customRender: 'item_id'
            }
          },
          {
            title: '报错原因',
            dataIndex: 'error',
            // width: '20%',
            scopedSlots: {
              customRender: 'error'
            }
          },
          {
            title: '状态',
            // dataIndex: 'status',
            // width: '20%',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '报错时间',
            dataIndex: 'create_at',
            // width: '20%',
            scopedSlots: {
              customRender: 'create_at'
            }
          }
          // {
          //   title: '操作',
          //   // dataIndex: 'active',
          //   // width: '20%',
          //   scopedSlots: {
          //     customRender: 'active'
          //   }
          // },

        ],
        selectedRowKeys: [], // Check here to configure the default column
        data: [
        //   {
        //   content: '不抵扣,价格不对',
        //   createTime: 1593230400000,
        //   id: 192,
        //   itemId: 610041566144,
        //   status: 1,
        //   userId: 13
        // }
        ],
        pagination: {},
        loading: false
      }
    },

    computed: {

    },
    created () {
      this.getErrorInfo()
    },
    mounted () {

    },
    methods: {
      moment,
      onChange (dates, dateStrings) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      this.form.start_time = moment(dateStrings[0]).format('X')
      this.form.end_time = moment(dateStrings[1]).format('X')
      this.getErrorInfo()
    },
      // 获取报错的信息
      getErrorInfo () {
        getErrorInfo(this.form)
        .then(res => {
          if (res.code === 200) {
            console.log('返回', res)
            this.data = res.data
        } else {
          this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
      },

      onSelectChange (selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys
      },
      handleTableChange (pagination, filters, sorter) {
        console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters
        })
      },
      fetch (params = {}) {
        console.log('params:', params)
        this.loading = true
        // some axaj
      },
      selectchange () {
        console.log(this.form.status)
        if (this.form.status === -1) {
          this.form.status = null
        }
        this.getErrorInfo()
      }
    }
  }
</script>

<style lang='less' scoped>
  .productsmam {
    width: 100%;

    .search_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .btns {
      padding: 8px 0;
      float: right;
    }
  }
</style>
